<!--
 * @Author: yanjikun
 * @Date: 2021-06-24 16:01:38
 * @LastEditors: yanjikun
 * @LastEditTime: 2022-05-31 11:46:01
 * @Description: file content
-->
<template>
  <Layout.Header class="layout-header">
    <div class="left-options">
      <YLogo />
      <span class="menu-fold" @click="() => $emit('update:collapsed', !collapsed)">
        <component :is="collapsed ? MenuUnfoldOutlined : MenuFoldOutlined"></component>
      </span>
      <Breadcrumb :routes="routes">
        <template #itemRender="{ route }">
          <span v-if="routes.includes(route)"> {{ route.breadcrumbName }} </span>
          <a v-else-if="/http(s)?:/.test(route.path)" :href="route.path" target="_blank">
            {{ route.breadcrumbName }}
          </a>
          <router-link v-else :to="{ path: route.path }">
            {{ route.breadcrumbName }}
          </router-link>
        </template>
      </Breadcrumb>
    </div>
    <Space class="right-options">
      <div class="flex items-center w-27px">
        <input
          type="color"
          v-model="customColor"
          @input="handleChangeColor({ primaryColor: customColor })"
        />
      </div>

      <Dropdown placement="bottom">
        <span class="header-user-dropdown">
          <Avatar style="background-color: #87d068">
            <template #icon>
              <UserOutlined />
            </template>
          </Avatar>
          <span class="header-user-dropdown_name">{{ userName }}</span>
        </span>
        <template #overlay>
          <Menu>
            <Menu.Item key="1"> <SolutionOutlined class="mr-8px" />个人信息 </Menu.Item>
            <Menu.Divider />
            <Menu.Item key="3" @click="handleLogout">
              <PoweroffOutlined class="mr-8px" />
              退出系统
            </Menu.Item>
          </Menu>
        </template>
      </Dropdown>
    </Space>
  </Layout.Header>
</template>

<script setup lang="ts">
  import { Layout, Breadcrumb, Dropdown, Menu, Avatar, Modal, Space } from 'ant-design-vue'
  import {
    MenuFoldOutlined,
    MenuUnfoldOutlined,
    PoweroffOutlined,
    SolutionOutlined,
    UserOutlined,
  } from '@ant-design/icons-vue'
  import { RouteRecordRaw, useRoute, useRouter } from 'vue-router'
  import YLogo from '../logo/index.vue'
  import { computed, nextTick, ref } from 'vue'
  import { useUserStore } from '@/store/modules/user'
  import { LOGIN_PATH } from '@/router/constant'
  import { Theme, useProjectStore } from '@/store/modules/projectConfig'

  defineProps({
    collapsed: {
      type: Boolean,
    },
  })
  defineOptions({
    name: 'YHeader',
  })
  interface Route {
    path: string
    breadcrumbName: string
    children?: Array<Route>
  }
  const route = useRoute()
  const router = useRouter()
  const userStore = useUserStore()
  const configStore = useProjectStore()
  const userName = computed(() => {
    return userStore.getUserInfo()?.username ?? 'Admin'
  })
  const formMateRoute = (list: RouteRecordRaw[]): Route[] => {
    return list.map((item: RouteRecordRaw) => ({
      path: item.path,
      breadcrumbName: item.meta!.title as string,
      children: formMateRoute(item.children || []),
    }))
  }
  const routes = computed(() => {
    return formMateRoute(route.matched).splice(1)
  })
  const handleLogout = async () => {
    Modal.confirm({
      title: '温馨提醒',
      content: '是否确认退出系统?',
      centered: true,
      async onOk() {
        await userStore.logout()
        await nextTick()
        router.replace({
          name: LOGIN_PATH,
          query: {
            redirect: route.fullPath,
          },
        })
      },
    })
  }
  const customColor = ref(configStore.primaryColor)
  const handleChangeColor = ({ primaryColor }: Theme) => {
    configStore.fillColor({ primaryColor })
  }
</script>

<style lang="less" scoped>
  .layout-header {
    @apply h-48px flex items-center bg-white justify-between px-16px leading-48px;

    .left-options {
      @apply flex items-center;

      .menu-fold {
        @apply cursor-pointer px-12px;

        &:hover {
          @apply bg-[#f6f6f6];
        }
      }
    }

    .right-options {
      .header-user-dropdown {
        @apply flex items-center cursor-pointer px-12px;

        .header-user-dropdown_name {
          @apply ml-8px text-black text-opacity-85 overflow-hidden overflow-ellipsis whitespace-nowrap;
          font-size: 14px;
        }

        &:hover {
          @apply bg-[#f6f6f6];
        }
      }
    }
  }
</style>
